import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/base.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-button.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-button-group.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-popper.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-scrollbar.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-dropdown.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-dropdown-menu.css.js";
import "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/theme-chalk/el-dropdown-item.css.js";
import { defineComponent as E, onMounted as H, ref as W, openBlock as l, createElementBlock as r, createElementVNode as t, withDirectives as m, renderSlot as I, Fragment as u, renderList as v, toDisplayString as f, vShow as h, unref as g, createVNode as y, withCtx as s, createBlock as _ } from "vue";
import { useElementSize as x } from "@vueuse/core";
import { ElButton as F } from "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/es/components/button/index.js";
import { ElDropdownItem as A, ElDropdownMenu as N, ElDropdown as z } from "../node_modules/.pnpm/element-plus@2.3.12_vue@3.3.4/node_modules/element-plus/es/components/dropdown/index.js";
const D = { class: "left" }, M = ["onClick"], $ = { class: "right" }, P = ["onClick"], V = {
  class: "icon",
  "aria-hidden": "true"
}, j = ["xlink:href"], q = { class: "navItem" }, G = { class: "navItem" }, oe = /* @__PURE__ */ E({
  __name: "Nav",
  props: {
    // 左部导航栏选项
    navItemLeft: { type: Array, default: [] },
    // 右部导航栏选项
    navItemRight: { type: Array, default: [] },
    // 导航栏版心宽度
    bannerWidth: { type: String, default: "100%" },
    // 导航栏高度
    navHeight: { type: String, default: "35px" },
    // 导航栏左右内边距
    navPadding: { type: String, default: "1rem" },
    // 导航栏背景颜色
    navBackgroundColor: { type: String, default: "#f5f5f5" },
    // 导航栏中文字大小
    navFontSize: { type: String, default: "13px" },
    // 导航栏文字颜色
    navFontColor: { type: String, default: "#6c6c6c" },
    // 导航项距离
    navItemMargin: { type: String, default: "1rem" },
    // 导航项激活颜色
    navItemActiveColor: { type: String, default: "#67c23a" },
    // 导航栏版心宽度多宽时导航栏右边收起
    navBannerRemainWidthRight: { type: Number, default: 860 },
    // 导航栏版心宽度多宽时导航栏左边收起
    navBannerRemainWidthLeft: { type: Number, default: 460 },
    // 导航栏选项收起后菜单图标
    menuIcon: { type: String, default: "xuanxiang" }
  },
  setup(o) {
    const e = o, C = {
      height: e.navHeight,
      padding: `0 ${e.navPadding}`,
      backgroundColor: e.navBackgroundColor,
      fontSize: e.navFontSize,
      color: e.navFontColor
    }, S = {
      width: e.bannerWidth
    }, B = {
      marginRight: e.navItemMargin
    }, w = {
      marginLeft: e.navItemMargin
    };
    H(() => {
      let d = document.getElementsByClassName("navItem");
      d = Array.from(d);
      for (let a of d)
        a.style.height = e.navHeight, a.style.lineHeight = e.navHeight, a.style.color = e.navFontColor, a.addEventListener("mouseover", () => {
          a.style.borderBottom = `1px solid ${e.navItemActiveColor}`, a.style.color = e.navItemActiveColor;
        }), a.addEventListener("mouseleave", () => {
          a.style.borderBottom = "none", a.style.color = e.navFontColor;
        });
    });
    const p = W(null), { width: c } = x(p);
    return (d, a) => {
      const R = F, k = A, L = N, b = z;
      return l(), r("div", {
        class: "nav",
        style: C
      }, [
        t("div", {
          class: "banner",
          style: S,
          ref_key: "nav",
          ref: p
        }, [
          t("div", D, [
            m(t("div", null, [
              I(d.$slots, "left", {}, () => [
                t("ul", null, [
                  (l(!0), r(u, null, v(o.navItemLeft, (n, i) => (l(), r("li", {
                    key: i,
                    style: B
                  }, [
                    t("span", {
                      onClick: n.clickHandler,
                      class: "navItem"
                    }, f(n.name), 9, M)
                  ]))), 128))
                ])
              ], !0)
            ], 512), [
              [h, g(c) > o.navBannerRemainWidthLeft]
            ])
          ]),
          t("div", $, [
            m(t("div", null, [
              I(d.$slots, "right", {}, () => [
                t("ul", null, [
                  (l(!0), r(u, null, v(o.navItemRight, (n, i) => (l(), r("li", {
                    key: i,
                    style: w
                  }, [
                    t("span", {
                      onClick: n.clickHandler,
                      class: "navItem"
                    }, f(n.name), 9, P)
                  ]))), 128))
                ])
              ], !0)
            ], 512), [
              [h, g(c) > o.navBannerRemainWidthRight]
            ]),
            m(y(b, { size: "large" }, {
              dropdown: s(() => [
                y(L, null, {
                  default: s(() => [
                    m(t("div", null, [
                      (l(!0), r(u, null, v(o.navItemLeft, (n, i) => (l(), _(k, {
                        key: i,
                        class: "el-dropdown-item",
                        onClick: n.clickHandler
                      }, {
                        default: s(() => [
                          t("span", q, f(n.name), 1)
                        ]),
                        _: 2
                      }, 1032, ["onClick"]))), 128))
                    ], 512), [
                      [h, g(c) <= o.navBannerRemainWidthLeft]
                    ]),
                    (l(!0), r(u, null, v(o.navItemRight, (n, i) => (l(), _(k, {
                      key: i,
                      class: "el-dropdown-item",
                      onClick: n.clickHandler
                    }, {
                      default: s(() => [
                        t("span", G, f(n.name), 1)
                      ]),
                      _: 2
                    }, 1032, ["onClick"]))), 128))
                  ]),
                  _: 1
                })
              ]),
              default: s(() => [
                y(R, {
                  link: "",
                  class: "btn"
                }, {
                  default: s(() => [
                    (l(), r("svg", V, [
                      t("use", {
                        "xlink:href": `#icon-${o.menuIcon}`
                      }, null, 8, j)
                    ]))
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }, 512), [
              [h, g(c) <= o.navBannerRemainWidthRight]
            ])
          ])
        ], 512)
      ]);
    };
  }
});
export {
  oe as default
};
